<template>
    <div class="user-container">
        <el-card class="user">
            <div class="ask">你好</div>
            <div class="username"> {{ username }}</div>

        </el-card>
    </div>
    <div class="count-container">
        <el-card class="card">
            <div class="card-kind">
                单车数量
            </div>
            <div class="card-kind-count">{{ bikeCount }}</div>

        </el-card>
        <el-card class="card">
            <div class="card-kind">
                用户数量
            </div>
            <div class="card-kind-count">{{ userCount }}</div>

        </el-card>
        <el-card class="card">
            <div class="card-kind">
                订单数量
            </div>
            <div class="card-kind-count">{{ orderCount }}</div>
        </el-card>
    </div>
    <Bar id="my-chart-id" :options="chartOptions" :data="data" />
</template>

<script setup>
import { ref, computed } from "vue"
import { getBikeList } from "../../api/bike";
import { listUsers } from "../../api/users";
import { getOrderList } from "../../api/order";
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
import { getUsername } from "../../utils/auth";
const bikeCount = ref(0);
const userCount = ref(0);
const orderCount = ref(0);

const username = getUsername();

getBikeList(1, 100, "", "").then(res => {
    bikeCount.value = res.data.records.length;
})

listUsers({
    pageNum: 1,
    pageSize: 100,
    status: ""
}).then(res => {
    userCount.value = res.data.total;
    console.log(res.data);
})

getOrderList(1, 100, "").then(res => {
    orderCount.value = res.data.records.length;
    console.log(res.data);
})

const data = computed(() => {
    return {

        labels: ['单车数量', '用户数量', '订单数量'],
        datasets: [{ data: [bikeCount.value, userCount.value, orderCount.value], label: 'Number', backgroundColor: 'rgba(75, 192, 192, 0.6)' }]
    }
})

// const chartData = ref({
//     labels: ['单车数量', '用户数量', '订单数量'],
//     datasets: [{ data: [bikeCount.value, userCount.value, orderCount.value] }]
// });

const chartOptions = ref({
    responsive: true,
    plugins: {
        datalabels: {
            display: false // 去掉数值标签
        }
    }
})

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

</script>

<style scoped>
.user-container {
    display: flex;
    /* justify-content: space-around; */
    flex-direction: row;
    margin-top: 20px;
    gap: 20px;
}

.ask {
    font-size: 20px;
}

.count-container {
    display: flex;
    /* justify-content: space-around; */
    flex-direction: row;
    margin-top: 20px;
    gap: 20px;
}

.card-kind-count {
    margin-top: 20px;
}
</style>